<template>
  <detailbox title="批准" @leftclick="close">
    <div slot="right" class="flex_item flex_between">
      <div></div>
      <div class="">
        <el-button type="primary" size="small" @click="submit()">提交</el-button>
        <el-button type="primary" size="small" plain @click="openDialg('showhistory')">审批历史详情</el-button>
      </div>
    </div>
    <el-form  size="small" ref="form" :model="form">
      <el-row class="mt10" v-for="(item, index) in form.detailList" :key="index">
        <el-col :span="16">
          <basic-container>
            <div class="main_title success_f flex_between">
              <b>管理信息<span v-if="form.detailList.length>1">({{index + 1}})</span></b>
            </div>
            <el-divider></el-divider>
            <div class="mb20">
              <span class="index_num success_bg">1</span>
              <b class="f14">基本信息</b>
            </div>
           <procss-work :item="item"></procss-work>
            <check-file :detail="item"></check-file>
          </basic-container>
        </el-col>
       <el-col :span="8">
         <basic-container>
           <div class="main_title"><b>批准操作</b></div>
           <el-divider></el-divider>
           <el-form-item label="批准结论：" :prop="`detailList.${index}.check`" :rules="{ required: true, message: '请选择审核结论', trigger: 'blur' }">
             <el-select v-model="item.check" placeholder="请选择">
               <el-option label="通过" value="1"></el-option>
               <el-option label="不通过" value="2"></el-option>
             </el-select>
           </el-form-item>
           <el-form-item
             label="不通过理由："
             v-if="item.check == '2'"
             :prop="`detailList.${index}.content`"
             :rules="{ required: true, message: '请输入不通过理由', trigger: 'blur' }"
           >
             <el-input placeholder="请输入" v-model="item.content" style="width:70%;"></el-input>
           </el-form-item>
           <el-form-item
             v-if="item.check == '1'"
             label="文件安全："
             :prop="`detailList.${index}.isEncryption`"
             :rules="{ required: true, message: '请选择文件安全', trigger: 'blur' }"
           >
             <el-select v-model="item.isEncryption" placeholder="请选择">
               <el-option label="加密" value="1"></el-option>
               <el-option label="不加密" value="0"></el-option>
             </el-select>
           </el-form-item>
           <el-form-item
             label="私钥持有人："
             v-if="item.isEncryption == '1' && item.check == '1'"
             :prop="`detailList.${index}.privateKeyHolder`"
             :rules="{ required: true, message: '请选择私钥持有人', trigger: 'blur' }"
           >
             <el-select v-model="item.privateKeyHolder" filterable placeholder="请选择输入">
               <el-option v-for="(item, i) in Alluser" :key="i" :value="item.value" :label="item.label"></el-option>
             </el-select>
           </el-form-item>
           <el-form-item
             label="文件生效日期："
             v-if="item.check == '1'"
             :prop="`detailList.${index}.beginTime`"
             :rules="{ required: true, message: '请选择文件生效日期', trigger: 'blur' }"
           >
             <el-date-picker v-model="item.beginTime" class="w160" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="默认当日"></el-date-picker>
           </el-form-item>
         </basic-container>
       </el-col>
      </el-row>
    </el-form>
    <el-row>
      <el-col :span="16">
        <check-process-record :guifanFilesProcessRecordList="guifanFilesProcessRecordList" :shenheNum="shenheNum" :progressType="progressType"></check-process-record>
      </el-col>
    </el-row>
     <steps ref="steps" @close="success()" :checkItem="form"></steps>
    <showhistory ref="showhistory" :processStatus="processStatus" :guifanFilesProcessRecordList="guifanFilesProcessRecordList"></showhistory>
  </detailbox>
</template>
<script>
import { getdealDetail, deal } from '@/api/myapi/tixiwenjian';
import procssWork from './procss-work.vue';
export default {
  props: {
    progressType: '',
    groupNumber: ''
  },
  components: {
    procssWork
  },
  data() {
    return {
      processStatus: '',
      radio: '',
      nowdate: '',
      checked: false,
      showpreview: false,
      tableData: [],
      useTemp: false,
      shenheNum: 0,
      system: 'trainprocess',
      options: [],
      guifanFilesProcessRecordList: [],
      form: {
        detailList: []
      },
    };
  },
  mounted() {
    this.getdealDetail();
  },
  methods: {
    getdealDetail() {
      getdealDetail(
        {
          groupNumber: this.groupNumber
        },
        this.system
      ).then(({ data }) => {
        if (data.success) {
          this.form.detailList = [...data.data];
          this.processStatus = data.data[0].processStatus;
          this.form.detailList.forEach(item => {
            this.$set(item, 'check', '');
            this.$set(item, 'content', '');
            this.$set(item, 'beginTime', '');
            this.$set(item, 'isEncryption', '');
            this.$set(item, 'privateKeyHolder', '');
          });
          this.guifanFilesProcessRecordList = data.data[0].processRecordList;
          this.shenheNum = data.data[0].processRecordList.length;
        }
      });
    },
    close() {
      this.$emit('close');
    },
    success() {
      this.$emit('close');
      this.$emit('success');
    },
    submit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          let data = [];
          for (let i = 0; i < this.form.detailList.length; i++) {
            let item = this.form.detailList[i];
            data.push({
              id: item.id,
              checkStatus: item.check || '0',
              type: this.progressType,
              content: item.content,
              privateKeyHolder: item.privateKeyHolder,
              isEncryption: item.isEncryption,
              beginTime: item.beginTime
            });
          }
          deal(
            {
              processList: JSON.stringify(data)
            },
            this.system
          ).then(({ data }) => {
            if (data.success) {
              // this.$message.success('提交成功')
              this.nowdate = this.dateFormat(new Date());
              this.openDialg('steps');
            }
          });
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss">
.active {
  background-color: #e6f1fc !important;
  color: #126bc9;
}

.leftbox {
  border-right: 2px solid #f0f2f5;
}
</style>
